<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
        }
        img{
            width:250px;
            height: 250px;
        }
        .left p span{
            color: blue;
        }
        .line{
            width: 1px;
            height: 200px;
            background-color: gainsboro;
        }
        .right{
            height: 250px;
            line-height: 40px;
        }
        .right-top{
            width: 200px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .right-line{
            width: 1.5px;
            height: 20px;
            background-color: gainsboro;
        }
        .ys{
            color: blue;
        }
        .close{
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="show=true">登录</button>
            <div class="box" v-show="show">
                <div class="left">
                    <h2>扫描二维码登录</h2>
                    <img :src="image" @mouseover="image='./qr-tips.74063ae1.png'" @mouseout="image='./下载.png'">
                    <p>请使用<span>哔哩哔哩客户端</span><br>扫码登录或扫描下载APP</p>
                </div>
                <div class="line"></div>
                <div class="right">
                    <div class="right-top">
                        <div @click="choose=1,ys=0" :class="{'ys':ys===0}">密码登录</div>
                        <div class="right-line"></div>
                        <div @click="choose=2,ys=1" :class="{'ys':ys===1}">短信登录</div>
                    </div>
                    <div v-if="choose===1">
                        <span>账号<input type="text" placeholder="请输入账号"></span><br>
                        <span>密码<input :type="falg?'text':'password'"  placeholder="请输入密码"></span><br>
                        <button>注册</button>
                        <button>登录</button>
                        <div><a>其他方式登录</a></div>
                    </div>
                    <div v-if="choose===2">
                        <span>+86<input type="text" placeholder="请输入手机号"></span><br>
                        <span>验证码<input type="text"  placeholder="请输入验证码"></span><br>
                        <button>登录/注册</button>
                        <div><a>其他方式登录</a></div>
                    </div>  
                </div>
                <div class="close"><button @click="show=false">X</button></div>
                
            </div>
        </div> 
    <script src="/vue.js"></script>
    <script>
    const {createApp,ref}=Vue
    createApp({
        setup(){
            let falg=ref()
            let show=ref(false)
            let choose=ref(1)
            let image=ref("./下载.png")
            let ys=ref(0)
            return{
                show,
                choose,
                image,
                ys
            }
        }
    }).mount('#app')
    </script>
</body>
</html>